﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>消逝</title>
<script src="js/jquery.min.js"></script>


<style>
@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
body {
  font-family: 'Nunito', sans-serif;
  background: #373e46;
}

#loading_line {
  width: 0px;
  height: 5px;
  background: blue;
}

.buttonContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  cursor: pointer;
}
.buttonContainer .complete {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: scale(1.9);
          transform: scale(1.9);
  color: #f9f9f9;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 0;
}
.buttonContainer .complete.fadein {
  opacity: 1;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.buttonContainer #counter {
  color: #e91d62;
  font-size: 19px;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: auto;
  display: none;
  position: absolute;
}
.buttonContainer .ball {
  position: absolute;
  left: 0;
  right: 0;
  top: -26px;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #e91d62;
  -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.54);
          box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.54);
  display: none;
}
.buttonContainer:before {
  content: "胆小勿入";
  display: block;
  text-transform: uppercase;
  color: #e91d62;
  font-weight: 700;
  font-size: 13px;
  -webkit-transform: translateY(38px);
          transform: translateY(38px);
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.buttonContainer.active {
  pointer-events: none;
}
.buttonContainer.active:before {
  opacity: 0;
}
.buttonContainer.active .ball {
  -webkit-animation: jump 2s cubic-bezier(0.16, 0.15, 1, 0.49) infinite;
          animation: jump 2s cubic-bezier(0.16, 0.15, 1, 0.49) infinite;
}
.buttonContainer.active #button {
  stroke-dashoffset: 290;
  width: 300px;
  stroke-width: 9;
  -webkit-animation: struk 2s cubic-bezier(0.16, 0.15, 1, 0.49) infinite;
          animation: struk 2s cubic-bezier(0.16, 0.15, 1, 0.49) infinite;
}
.buttonContainer #button {
  stroke-dasharray: 411;
  stroke-dashoffset: 0;
  marker-start: 30;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@-webkit-keyframes jump {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  10% {
    -webkit-transform: translateY(-180%);
            transform: translateY(-180%);
  }
  18% {
    width: 40px;
    height: 40px;
  }
  20% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
    width: 48px;
    height: 32px;
  }
  22% {
    width: 40px;
    height: 40px;
  }
  30% {
    -webkit-transform: translateY(-90%);
            transform: translateY(-90%);
  }
  38% {
    width: 40px;
    height: 40px;
  }
  40% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
    width: 44px;
    height: 36px;
  }
  42% {
    width: 40px;
    height: 40px;
  }
  49% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  57% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  65% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  70% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes jump {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  10% {
    -webkit-transform: translateY(-180%);
            transform: translateY(-180%);
  }
  18% {
    width: 40px;
    height: 40px;
  }
  20% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
    width: 48px;
    height: 32px;
  }
  22% {
    width: 40px;
    height: 40px;
  }
  30% {
    -webkit-transform: translateY(-90%);
            transform: translateY(-90%);
  }
  38% {
    width: 40px;
    height: 40px;
  }
  40% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
    width: 44px;
    height: 36px;
  }
  42% {
    width: 40px;
    height: 40px;
  }
  49% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  57% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  65% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  70% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes struk {
  18% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  20% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  22% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  38% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  40% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  42% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes struk {
  18% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  20% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  22% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  38% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  40% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  42% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
#aaa{
    font-family: 'Nunito', sans-serif;
	 font-size: 13px;
	color: #e91d62;
}
.clear{ clear:both} 
</style>

</head>
<body>

<div class="buttonContainer">
	<div class="complete"></div>
	<div class="ball"></div>
	<svg width="182" height="61" xmlns="http://www.w3.org/2000/svg">
	  <path id="button" d="m31.048188,4.720621l120.048623,0l0,0c15.726711,0 28.475699,11.640603 28.475699,26.000007c0,14.359399 -12.748994,25.999997 -28.475699,25.999997l-120.048623,0l0,0c-15.726693,0 -28.475699,-11.640598 -28.475699,-25.999997c0,-14.359409 12.749006,-26.000007 28.475699,-26.000007z" stroke-width="4" stroke="#e91d62" fill="none">
	</svg>
	<div id="counter">0</div>
	<div id="aaa"></div>
</div>

<script>
<!-- $('.buttonContainer').click(function(){-->
$(function(){ 
	if($('.buttonContainer').hasClass('active')){

		$('.buttonContainer').removeClass('active');
		$('.complete').removeClass('fadein');
		$('#counter').fadeOut(100);
		$('.ball').fadeOut(100);
		count().stop;
		
	} else{
		$('.buttonContainer').addClass('active');
		$('#counter').fadeIn(200);
		$('.ball').fadeIn(200);
		count();
	}
});

//Loading
function count(){
	aa();
	$({countNum: $('#counter').text()}).animate({countNum: 100}, {
	  duration: 2500,
	  easing:'linear',
	  step: function() {
		 $('#counter').text(Math.floor(this.countNum) + '%');		
	  },
	  complete: function() {
		 $('#counter').fadeOut(200);
		 $('.complete').addClass('fadein');
		 $('.ball').fadeOut(200);
		  $('#button').fadeOut(100);
		  setTimeout(function() {
			   $('.buttonContainer').removeClass('active');
			  $('.complete').removeClass('fadein');
			  $('#button').fadeIn(200);
			   		}, 200);
	  }

	});		

}
function aa(){
	var t1=setTimeout(function() {
			$('#aaa').append("前");
			   		}, 500);
						var t2=setTimeout(function() {
			$('#aaa').append("方");
			   		}, 1000);
						var t3=setTimeout(function() {
			$('#aaa').append("高");
			   		}, 1500);
						var t4=setTimeout(function() {
			$('#aaa').append("能");
			   		}, 2000);

				setTimeout(function() {
			location="index2.html"			 
			}, 3200);		  		 

}
</script>

</body>
</html>